<template>
	<div class="container">
		<el-form>
			<el-form >
				<el-row :gutter="20">
				  <el-col :span="6">
					  <div class="grid-content bg-purple1">
							<h2>{{details.productName}}</h2>
							<div>产品名称</div>
						</div>
				    </el-col>
				 
				    <el-col :span="6">
				  	  <div class="grid-content bg-purple2">
				  			<h2>{{details.batch}}</h2>
				  			<div>加工批号</div>
				  		</div>
				    </el-col>
					
				  
					  
					<el-col :span="6">
					  <div class="grid-content bg-purple4">
							<h2>{{details.surplusNumber}}{{details.units}}</h2>
							<div>待分包数量</div>
						</div>
					</el-col>
				</el-row>
			</el-form>
			<el-form-item class="footerFixed" label-width="0px">
			    <el-button @click="backPage">返回</el-button>
			</el-form-item>
		</el-form>
		<el-table
		    :data="tableData"
		    border
		    ref="multipleTable"
		    header-cell-class-name="table-header">
		    <el-table-column prop="createtime" sortable label="分包时间"></el-table-column>
		    <el-table-column prop="materialType" sortable label="规格">
				<template slot-scope="scope">
					{{scope.row.spec}}{{scope.row.specUnits}}
				</template>
			</el-table-column>
		    <el-table-column prop="totalNumber" sortable label="追溯码数量"></el-table-column>
		    <el-table-column prop="weight" sortable label="使用成品量">
				<template slot-scope="scope">
					{{scope.row.weight}}{{scope.row.units}}
				</template>
			</el-table-column>
			<el-table-column prop="materialCode" sortable label="操作人"></el-table-column>
		</el-table>
	</div>
</template>

<script>
	import {sub_findByRelevanceId} from "@/request/api"
	export default {
		data(){
			return{
				tableData:[],
				details:''
			}
		},
		mounted(){
			this.details = this.$route.query
			this.init()
		},
		methods:{
			backPage(){
				this.$router.go(-1)
			},
			// 获取分包详情列表
			init(){
				sub_findByRelevanceId(this.details.id).then((res)=>{
					this.tableData = res.data
				})
			}
		}
	}
</script>

<style scoped>
.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple1 {
    background: #409EFF 10000%;
  }
  .bg-purple2 {
    background: #F56C6C 10000%;
  }
  .bg-purple3 {
    background: #67C23A 10000%;
  }
  .bg-purple4 {
    background: #909399 10000%;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 80px;
	color:white;
  }
  .grid-content div{
	  text-align: right;
	  font-size:14px;
	  margin-top:4px;
	  padding-right:20px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  h2{
	  color:white;
	  text-align: right;
	  padding-top:20px;
	  padding-right:20px;
  }
</style>